<!-- 事件图谱 -->
<template>
    <div class="box">
        <!-- 左侧导航栏 -->
        <div class="detail">
      <div class="left">
        <div class="work">
          业务领域选择
        </div>
        <div class="info-list">
          <div
            class="info-item"
            v-for="(item, index) in infoList"
            :key="index"
            :class="{ active: position === item.value }"
            @click="infoItemClick(item, index)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="right">
        <div v-if="position === '1'">
          <clientServer></clientServer>
        </div>
        <div v-if="position === '2'">
          <basicInfo></basicInfo>
        </div>
      </div>
    </div>
      
    </div>
  </template>
  <script>
  import clientServer from './components/clientServer.vue'
import basicInfo from './components/basicInfo.vue'
  import { getBond } from "@/api/common/index.js";
//   import earches from "./components/earches.vue";
//   import descend from "./components/descend.vue";
  import {
    queryBondProbabilityDetail,
    newBondInfo,
  } from "@/api/recommendationSystem/index.js";
  export default {
    name:'',
    components:{
        clientServer,
    basicInfo,
        // earches,
        // descend
    },
    data() {
      return {
        // 左侧导航lable
        position: '1',
      infoList: [
        {
          label: '外汇',
          value: '1',
          isActive: false,
        },
        {
          label: '债券',
          value: '2',
          isActive: false,
        },
      ],
        //  tabs切换
        activeName: "second",
        drawer: false,
        searchList: [],
        tableData: [],
        searchInput: "",
        bondInfo: {},
        total: 0,
        count: "",
        page: 1,
        bondTotal: 0,
        bondInfoForm: {
          bondSname: "",
          bondId: "",
          value1: "",
        },
      };
    },
    filters: {
      filterNum(value) {
        const str = value ? value.toString() : "";
        if (str) {
          const reg =
            str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
          const returnData = str.replace(reg, ",");
          return returnData;
        } else {
          return "";
        }
      },
    },
    mounted() {},
    methods: {
        // 左侧导航切换
        getCurrentActive() {
      const path = this.$route.path
      console.log('path', path)
      const index = path.split('details/')[1]
      if (index === 'one') {
        this.position = '1'
      }
      if (index === 'two') {
        this.position = '2'
      }
      if (index === 'three') {
        this.position = '3'
      }
    },
    infoItemClick(item, index) {
      this.position = item.value
    },
      // tabs切换
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 文件上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      //   新增弹框
      onSubmit() {
        console.log("submit!");
      },
      //
      clearFn() {
        this.bondInfo = {};
      },
      bondInfoSubmit() {
        const param = {
          ...this.bondInfoForm,
          pn: 10,
          page: 1,
        };
        console.log("newBondInfo param", param);
        this.newBondInfo(param);
      },
      glFn(row) {
        return row.assessRate;
        // return Number(Number(row.assessRate) * 100).toFixed(2) + "%"
      },
      zjFn() {
        this.drawer = true;
        const param = {
          bondName: "",
          bondId: "",
          pn: 10,
          page: 1,
        };
        this.newBondInfo(param);
      },
      bondRowClick(row) {
        this.drawer = false;
        const param = {
          bondName: row.bondName,
          bondId: row.bondId,
          pn: 10,
          page: 1,
        };
        getBond(param).then((res) => {
          this.bondInfo = res.data.result[0];
        });
        queryBondProbabilityDetail({
          bondId: row.bondId,
          page: 1,
          pn: 10,
        }).then((res) => {
          console.log(res, "resres");
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
      bondPageFn(page) {
        const param = {
          bondName: "",
          bondId: "",
          pn: 10,
          page: page,
        };
        this.newBondInfo(param);
      },
      pageFn(currentPage) {
        console.log("pageFn", currentPage);
        queryBondProbabilityDetail({
          bondId: this.bondInfo.bondId,
          page: currentPage,
          pn: 10,
        }).then((res) => {
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
      newBondInfo(param) {
        const _this = this;
        newBondInfo(param).then((res) => {
          _this.searchList = res.data.result;
          _this.bondTotal = Number(res.data.totalResults);
          console.log(res, "resres");
        });
      },
      clickFn(v, i) {
        this.clearFn();
        this.count = i;
        this.bondInfo = {
          ...v,
        };
        queryBondProbabilityDetail({
          bondId: v.bondId,
          page: this.page,
          pn: 10,
        }).then((res) => {
          console.log(res, "resres");
          this.tableData = res.data.result;
          this.total = Number(res.data.totalResults);
        });
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .detail {
  display: flex;
  color: #fff;
  .left {
    width: 12.5rem;
    background-color: #262d47;
    height: 100%;
    .work{
      padding: 0.625rem;
      text-align: center;
      border-bottom: 1px solid #2c365f;
    }
    .info-list {
      padding: 0.625rem;
      .info-item {
        margin-bottom: 0.125rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        // background-color: #363657;
        color: #959fc5;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:hover {
          background-color: #1c2238 !important;
          color: #fff;
          cursor: pointer;
        }
      }
      .active {
        background-color: #1c2238 !important;
        color: #fff;
      }
    }
  }
  .left {
    width: 12.5rem;
  }
  .right {
    flex: 1;
    background-color: #262d47;
    height: 100%;
    margin-left: 0.625rem;
    // overflow: scroll;
  }
}
  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }
  
  .pop .el-form ::v-deep .el-form-item .el-form-item__content .el-input__inner {
    width: 100%;
  }
  .pop
    .el-form
    ::v-deep
    .el-form-item
    .el-form-item__content
    .el-textarea__inner {
    border: 1px solid rgba(126, 163, 255, 0.3);
    color: #ffffff;
    background-color: #363657;
  }
  .pop ::v-deep .el-button--primary {
    border: 1px solid rgba(126, 163, 255, 0.3);
    color: #ffffff;
    background-color: #363657;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #363657;
    background: rgba(31, 155, 253, 0.2);
    color: #fff;
  }
  ::v-deep .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    background-color: #363657;
  }
  ::v-deep .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: #363657;
  }
  
//   .box {
//     .topBar {
//       min-height: 400px;
//       // background-color: blue;
//     }
  
//     .topBox {
//       display: flex;
//       .lefts {
//         flex: 1;
//         min-height: 600px;
//         background-color: #262d47;
//         margin-right: 10px;
//       }
//       .rights {
//         flex: 1;
//         min-height: 600px;
//         background-color: #262d47;
//       }
//     }
  
//     .left {
//       width: 240px;
//       background-color: #262d47;
//       height: 100%;
//     }
  
//     .bottom {
//       flex: 1;
//       height: 100%;
//       display: flex;
//       flex-direction: column;
//       margin-bottom: 20px;
//     }
  
//     .searchList {
//       padding-top: 10px;
//       height: 700px;
//       overflow: scroll;
//       padding-left: 10px;
  
//       .searchListItem {
//         height: 35px;
//         line-height: 35px;
//         text-align: center;
//         color: #959fc5;
//         font-size: 12px;
//         overflow: hidden; //超出隐藏
//         white-space: nowrap; //不折行
//         text-overflow: ellipsis; //溢出显示省略号
//       }
  
//       .searchListItem:hover {
//         background: #1f9bfd !important;
//         color: #fff;
//         cursor: pointer;
//       }
//     }
  
//     .searchListItemAct {
//       background: #1f9bfd !important;
//       color: #fff !important;
//     }
  
//     .bondCard {
//       background-color: #262d47;
//       color: #ffffff;
//       margin-bottom: 10px;
  
//       .info {
//         display: flex;
//         padding: 20px 20px;
//       }
  
//       .infoItem {
//         width: 300px;
//       }
  
//       .infoItemVal {
//         font-size: 14px;
//         font-family: PingFangSC-Regular, PingFang SC;
//         font-weight: 400;
//         color: #d6dcff;
//       }
  
//       .infoItemLabel {
//         margin-right: 30px;
//         font-size: 14px;
//       }
//     }
  
//     .el-table ::v-deep th.el-table__cell {
//       background-color: #1c2238 !important;
//       color: #fff;
//     }
  
//     .tableBox {
//       background-color: #262d47;
//       flex: 1;
//       padding: 15px 10px;
//     }
  
//     .tableBoxChild {
//       min-height: 400px;
//     }
  
//     .el-pagination {
//       text-align: right;
//     }
  
//     .leftTitle {
//       height: 40px;
//       line-height: 40px;
//       background: #354060;
//       font-size: 14px;
//       font-family: PingFang-SC-Bold, PingFang-SC;
//       font-weight: bold;
//       color: #ffffff;
//       padding-left: 17px;
//       margin-bottom: 10px;
//     }
  
//     .bondCardTitle {
//       height: 40px;
//       background: #354060;
//       font-size: 14px;
//       font-family: PingFang-SC-Bold, PingFang-SC;
//       font-weight: bold;
//       color: #ffffff;
//       padding: 10px 16px;
//     }
//   }
  </style>
  